<template>
  <div class="table-data">
    <el-alert class="alert-total" type="info" show-icon :closable="false">
        <template #title>数据共{{count}}条</template>
    </el-alert>
    <!-- table -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="120">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="120">
        </el-table-column>
        <el-table-column
          label="题型"
          width="120">
            <template #default="{row}">
                {{row.questionType | formatType}}
            </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="300">
            <template #default="{row}">
                <div v-html="row.question"></div>
            </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="300">
            <template #default="{row}">
                {{row.addDate | formatTime}}
            </template>
        </el-table-column>
        <el-table-column
          label="难度"
          width="120">
            <template #default="{row}">
                {{row.difficulty | formatDiff}}
            </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120">
        </el-table-column>
        <el-table-column
          label="审核状态"
          width="120">
            <template #default="{row}">
                {{row.chkState | formatChkState}}
            </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="180">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="120">
        </el-table-column>
        <el-table-column
          label="发布状态"
          width="120">
            <template #default="{row}">
                {{row.publishState | formatPubState}}
            </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
            <template #default="{row}">
                <el-button type="text" size="small" @click="$emit('preview-btn-click', row.id)">预览</el-button>
                <el-button type="text" size="small" @click="$emit('audit-btn-click', row.id)" :disabled="row.chkState?true:false">审核</el-button>
                <el-button type="text" size="small" @click="$emit('publish-btn-click', [row.id, row.publishState])">{{row.publishState?'下架':'上架'}}</el-button>
                <el-button type="text" size="small" @click="$emit('edit-btn-click', row.id)" :disabled="row.publishState?true:false">修改</el-button>
                <el-button type="text" size="small" @click="$emit('delete-btn-click', row.id)" :disabled="row.publishState?true:false">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- table   END -->
  </div>
</template>

<script>
export default {
  name: 'TableArea',
  props: {
    tableData: {
      required: true,
      type: Array,
      default () {
        return []
      }
    },
    count: {
      required: true,
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },
  created: function () {},
  methods: {},
  filters: {
    formatType (val) {
      let type = ''
      switch (val) {
        case '1':
          type = '单选';
          break;
        case '2':
          type = '多选';
          break;
        case '3':
          type = '简答';
          break;
        default:
          break;
      }
      if (type) {
        return type
      } else {
        return val
      }
    },
    formatDiff (val) {
      let type = ''
      switch (val) {
        case '1':
          type = '简单';
          break;
        case '2':
          type = '一般';
          break;
        case '3':
          type = '困难';
          break;
        default:
          break;
      }
      if (type) {
        return type
      } else {
        return val
      }
    },
    formatChkState (val) {
      let type = ''
      switch (val) {
        case 0:
          type = '待审核';
          break;
        case 1:
          type = '已审核';
          break;
        case 2:
          type = '已拒绝';
          break;
        default:
          break;
      }
      if (type) {
        return type
      } else {
        return val
      }
    },
    formatPubState (val) {
      let type = ''
      switch (val) {
        case 0:
          type = '已下架';
          break;
        case 1:
          type = '已发布';
          break;
        default:
          break;
      }
      if (type) {
        return type
      } else {
        return val
      }
    }
  }
}
</script>

<style scoped></style>
